<template>
  <footer class="bottom-box">
    <div class="bottom-content">
        <router-link exact :to="item.goAd" :key="index" v-for="(item,index) in list"  >
            <div>
                <i :class="[item.classname]" ></i>
                <span>{{item.name}}</span>
            </div>
        </router-link>
    </div>
  </footer>
</template>

<script>
import Router from 'vue-router'
export default {
    name:'footerpage',
    data(){
        return{
            isActive:0,
            list:[{name:'首页',classname:'icon-img first',goAd:'/',active:'firstactive'},{name:'订单',classname:'icon-img second',goAd:'/orderpage',active:'secondactive'},{name:'我的',classname:'icon-img three',goAd:'/personpage',active:'threeactive'}]
        }
    },
    methods: {
        
    }
}
</script>

<style lang='scss'>
@import '../../static/px2rem.scss';
.bottom-box{
    width: 100%;
    position: fixed;
    bottom: 0;
    .bottom-content{
        width: 100%;
        height: px2rem(49);
        border-top: 1px solid #b6b6b6;
        background-color: rgba(246,246,246,0.95);
        text-align: center;
        z-index: 1100;
        a{
            color: #999;
            display: inline-block;
            height: 100%;
            width: 32%;
            div{
                display: inline-block;
                width: 100%;
                height: 100%;
            }
            span{
                display: block;
                font-size: px2rem(11);
                margin-top: px2rem(1);
            }
            .icon-img{
                display: block;
                width: px2rem(25);
                height: px2rem(25);
                margin: px2rem(7) auto 0;
                background: url('../assets/img/icon.png') no-repeat;
                background-size: px2rem(25) auto;
            }
            .first{
                background-position: 0 px2rem(-75);
            }
            &.router-link-active .first {
                background-position: 0 px2rem(-50);
            }
            .second{
                background-position: 0 px2rem(-25);
            }
            &.router-link-active .second {
                background-position: 0 px2rem(0);
            }
            .three{
                background-position: 0 px2rem(-125);
            }
            &.router-link-active .three {
                background-position: 0 px2rem(-100);
            }
        }
    }
}
</style>
